<template>
  <div>
    <el-container style="background: #f5f7f9;">
      <el-header style="background: #fff;padding: 12px 12px;height:auto;">
        <div>
          <el-form :model="queryData" :inline="true" size="small">
            <el-form-item>
              <el-radio-group v-model="queryData.depositStatus" type="el-button" @change="depositStatusChange">
                <el-radio-button label="PENDING">待审核</el-radio-button>
                <el-radio-button label="DEPOSIT">已通过</el-radio-button>
                <el-radio-button label="INVALID">作废</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="!isOrgOwner">
              <el-select v-model="queryData.customer" filterable clearable placeholder="请选择客户">
                <el-option v-for="item in customerOptions" :key="item.orgOwnerName" :value="item.orgOwner" :label="item.orgOwnerName" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="list">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main style="margin-top: 15px; background: #fff;padding: 12px 16px 0 16px;height: 100%;">
        <el-table ref="multipleTable" :data="table_body" border stripe :max-height="tableHeight">
          <el-table-column prop="txId" label="交易号" />
          <el-table-column prop="orgOpName" label="收款方" />
          <el-table-column prop="orgOwnerName" label="付款方" />
          <el-table-column prop="amount" label="银行转账金额" />
          <el-table-column prop="currency" label="银行转账币种" />
          <el-table-column prop="bankReceipt" label="银行转账凭证">
            <template slot-scope="scope">
              <div class="demo-upload-list" @click="handleView(scope.row.bankReceipt)">
                <img :src="scope.row.bankReceipt">
                <div class="demo-upload-list-cover">
                  <i class="el-icon-view" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="bankCardNumber" label="银行转账卡号" />
          <el-table-column prop="exchangeRate" label="汇率" />
          <el-table-column prop="exchangeCurrency" label="换汇币种" />
          <el-table-column prop="exchangeAmount" label="换汇金额" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column prop="txDate" label="交易时间" />
          <el-table-column v-if="!isOrgOwner" label="操作">
            <template slot-scope="scope">
              <div v-show="queryData.depositStatus === 'PENDING'">
                <el-button v-has="60201" size="small" shape="circle" type="text" @click="edit(scope.row)">编辑</el-button>
                <el-button v-has="60202" size="small" shape="circle" type="text" @click="audit(scope.row, true)">通过</el-button>
                <el-button v-has="60203" size="small" shape="circle" type="text" @click="audit(scope.row, false)">作废</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer style="padding:0;background: #fff;">
        <div style="text-align: right; padding-top: 10px;">
          <el-pagination background :current-page="queryData.currentPage" :page-sizes="[50,100]" :page-size="queryData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal" style="float:right;" @size-change="onPageSizeChange" @current-change="onPageChange" />
        </div>
      </el-footer>
    </el-container>
    <el-dialog :visible.sync="openDrawer" :title="drawerTitle" width="800" :close-on-click-modal="false">
      <el-form label-position="top">
        <el-row :gutter="32">
          <el-col :span="12">
            <el-form-item label="银行转账币种" label-position="top" required>
              <el-select v-model="formData.currency" name="currency" style="width:100%">
                <el-option v-for="currency in currencies" :key="currency.name" :label="currency.name" :value="currency.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行转账金额" label-position="top" required>
              <el-input v-model="formData.amount" type="number" placeholder="充值金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="32">
          <el-col :span="12">
            <el-form-item label="汇率" label-position="top" required>
              <el-input v-model="formData.exchangeRate" type="number" placeholder="汇率" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="换汇金额" label-position="top" required>
              <el-input v-model="formData.exchangeAmount" type="number" placeholder="换汇金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="32">
          <el-col :span="12">
            <el-form-item label="银行付款账户" label-position="top" required>
              <el-input v-model="formData.bankCardNumber" placeholder="银行付款账户" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传凭证" label-position="top" required>
              <div class="demo-upload-list">
                <div @click="handleView(imageUrl)">
                  <img :src="imageUrl">
                  <div class="demo-upload-list-cover">
                    <i class="el-icon-view" />
                  </div>
                </div>
              </div>
              <el-upload
                ref="idCardBack"
                :show-file-list="false"
                :on-success="handleSuccessIdCardBack"
                accept="image/png,image/jpeg,image/jpg"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :with-credentials="true"
                type="drag"
                :multiple="false"
                :action="baseUrl"
              >
                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="32">
          <el-col :span="24">
            <el-form-item label="备注" label-position="top">
              <el-input v-model="formData.remark" type="textarea" placeholder="备注" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div>
            <p>温馨提示</p>
            1、通过信用卡的快捷支付有500元限制;超过500元时您可以选择其它方式支付</br>
            2、如您有欠费账单，充值后会优先补扣欠费账单</br>
            3、充值后请及时对支付订单进行结算，以免影响正常服务
          </div>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 8px" @click="openDrawer = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="imgViewVisible" width="500px">
      <img v-show="imgViewVisible" :src="imgViewUrl" style="width: 100%">
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import config from '@/settings'
import { mapState } from 'vuex'
import { copyProperty } from '@/utils/tools'
const BASE_URL = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
  data() {
    return {
      baseUrl: BASE_URL + '/upload',
      openDrawer: false,
      imageUrl: '',
      currencies: [
        { name: '美元', value: 'USD' },
        { name: '欧元', value: 'EUR' },
        { name: '人民币', value: 'CNY' },
        { name: '港币', value: 'HKD' },
        { name: '日元', value: 'JPY' },
        { name: '英镑', value: 'GBP' }
      ],
      table_body: [

      ],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formDataDefault: {
        currency: '',
        amount: '',
        bankCardNumber: '',
        bankRecept: '',
        remark: ''
      },
      formData: {
        txId: '',
        exchangeAmount: '',
        exchangeRate: '',
        currency: '',
        amount: '',
        bankCardNumber: '',
        bankRecept: '',
        remark: ''
      },
      queryData: {
        pageSize: 50,
        currentPage: 1,
        customer: '',
        depositStatus: 'PENDING'
      },
      pageTotal: 0,
      pageSizeOpts: [50, 100],
      drawerTitle: '充值',
      // 充值凭证
      idCardBackVisible: false,
      idCardBackUploadList: [],
      imgViewVisible: false,
      imgViewUrl: ''
    }
  },
  computed: {
    tableHeight() {
      return document.documentElement.clientHeight - 260
    },
    pageSize() {
      return this.pageSizeOpts[0]
    },
    ...mapState(//
      {
        customerOptions: state => state.base.customerOptions,
        profile: state => state.user
      }
    ),
    isOrgOwner() {
      return this.profile.orgOwner
    }
  },
  created() {
    this.$store.dispatch('getCustomerOptions')
    this.list()
  },
  mounted() {
   // this.idCardBackUploadList = this.$refs.idCardBack.fileList
  },
  methods: {
    list() {
      request({
        url: 'account/deposit-list',
        method: 'post',
        data: this.queryData
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.table_body = res.data.records
            this.pageTotal = res.data.total
          }
        }
      })
    },
    depositStatusChange() {
      this.queryData.pageSize = 50
      this.queryData.currentPage = 1
      this.list()
    },
    submit() {
      if (this.formData.exchangeRate === 0 || this.formData.exchangeAmount === 0) {
        this.$Notice.warning({
          title: '汇率|换汇金额 不能为零',
          duration: 0
        })
        return
      }
      request({
        url: 'account/deposit/edit',
        method: 'post',
        data: this.formData
      }).then(res => {
        if (res.success) {
          this.openDrawer = false
          this.list()
        }
      })
    },
    audit(row, passed) {
      if (passed && (row.exchangeRate === 0 || row.exchangeAmount === 0)) {
        this.$message({
          showClose: true,
          message: '汇率|换汇金额 不能为零</br>请先去编辑汇率,换汇金额',
          type: 'error',
          duration: 0
        })
        return
      }
      request({
        url: 'account/deposit/audit?txId=' + row.txId + '&audit=' + passed,
        method: 'get'
      }).then(res => {
        if (res.success) {
          this.openDrawer = false
          this.list()
        }
      })
    },
    edit(row) {
      this.drawerTitle = '编辑'
      copyProperty(this.formData, row)
      this.imageUrl = row.bankReceipt
      this.openDrawer = true
    },
    add() {
      for (const x in this.formData) {
        this.formData[x] = this.formDataDefault[x]
      }
      this.openDrawer = true
    },
    openDefDrawer() {
      this.openChargeDefDrawer = true
    },
    closeDefDrawer() {
      this.openChargeDefDrawer = false
    },
    onPageSizeChange(pageSize) {
      this.queryData.pageSize = pageSize
      this.list()
    },
    onPageChange(page) {
      this.queryData.currentPage = page
      this.list()
    },
    /** 身份证反面相关 */
    handleView(url) {
      this.imgViewUrl = url
      this.imgViewVisible = true
    },
    handleSuccessIdCardBack(res, file) {
      if (res.success) {
        file.url = res.ossUrl
        file.name = res.ossKey
        this.formData.bankRecept = res.ossKey
        this.imageUrl = res.ossUrl
      } else {
        this.$message({
          showClose: true,
          message: res.errorInfo,
          type: 'error',
          duration: 0
        })
      }
    },
    handleRemoveIdCardBack(file) {
      const fileList = this.$refs.idCardBack.fileList
      this.$refs.idCardBack.fileList.splice(fileList.indexOf(file), 1)
    },
    handleBeforeUploadIdCardBack() {
      const check = this.idCardBackUploadList.length >= 1
      if (check) {
        this.$Notice.warning({
          title: '只能上传一张照片.'
        })
      }
      return !check
    },
    handleSuccess(res, file) {
      if (res.success) {
        file.url = res.ossUrl
        file.name = res.ossKey
      } else {
        this.$Notice.error({ desc: res.errorInfo })
      }
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '上传的文件格式不对',
        desc: '请上传图片格式 jpg 或者 png.'
      })
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '文件太大了',
        desc: '文件不得大于 2M.'
      })
    }
  }
}
</script>
<style>
    .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }

    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
